import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import TREE from './assets/img/tree.png'
import SHIP from './assets/img/ship.png'
import FLASK from './assets/img/flask.png'
// 场景
const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

// 使用纹理
const textureLoader = new THREE.TextureLoader()
const treeloader = textureLoader.load(TREE)
const shiploader = textureLoader.load(SHIP)
const flaskloader = textureLoader.load(FLASK)

// 纹理属性
// shiploader.offset.set(0.5, 0.5)
shiploader.center.set(0.5, 0.5)
// shiploader.wrapS = THREE.RepeatWrapping
// shiploader.wrapT = THREE.RepeatWrapping
// shiploader.repeat.set(2, 4)
// 纹理显示    低像素展示
shiploader.minFilter = THREE.NearestFilter
shiploader.magFilter = THREE.NearestFilter

// 标准网格材质
const mgeometry = new THREE.BoxGeometry(1, 1, 1, 200, 200);
const meshStandardMaterial = new THREE.MeshStandardMaterial({
    color: 'yellow',
    map: treeloader,
    alphaMap: treeloader,
    // transparent: true,
    // 渲染两面（外面、里面）
    side: THREE.DoubleSide,
    // 置换贴图
    // displacementMap: flaskloader,
    // displacementScale: 0.5,
    // opacity: 0.5
    // 粗糙度
    // roughness: 1,
    // roughnessMap: flaskloader,
    // 金属贴图，光打上来将呈现金属光芒
    metalness: 1,
    metalnessMap: treeloader,
    // 法线光贴图
    // normalMap: flaskloader
});
const mCube = new THREE.Mesh(mgeometry, meshStandardMaterial);
mCube.position.set(0, 0, 0)
scene.add(mCube);

// 加上灯光 环境光不能用来投射阴影，因为它没有方向。 入参 颜色的rgb数值  光照的强度
// const light = new THREE.AmbientLight('white', 1);
// scene.add(light);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-10, 10, 10)
scene.add(directionalLight);

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 新增轨迹控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 使用渲染器   通过相机将场景渲染
function render(time) {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render()